<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./Jcrop-WIP-2.x/js/jquery.min.js"></script>
	<script src="./Jcrop-WIP-2.x/js/Jcrop.js"></script>
	<link rel="stylesheet" href="./Jcrop-WIP-2.x/css/Jcrop.css">
</head>
<body>
	<img src="./1.jpg" alt="">
	<script>
		$( 'img' ).Jcrop({
			setSelect: [ 100, 100, 100, 100 ]
		});

		$('body').on('cropstart cropmove cropend',function(e,s,c){

		  console.log(e,s,c);
		  // @todo: do something useful with c
		  // { x: 10, y: 10, x2: 30, y2: 30, w: 20, h: 20 }
		  // c.x, c.y, c.w, c.h, ...
		  // or access s.selectionApiMethod() or s.core.apiMethod() etc
		  // compare event type with e.type (e.g. in if conditional, switch block)

		});
	</script>
</body>
</html>